<template>
  <div class="flex-center">
    <el-card style="width: 100%">
      <el-form :model="videoForm">
        <el-form-item label="标题">
          <el-input placeholder="请输入内容" v-model="videoForm.title"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
              class="avatar-uploader"
              :action="shareThumbnailUpload"
              :show-file-list="false"
              :on-success="handleCoverSuccess"
          >
            <img v-if="videoForm.cover" :src="videoForm.cover" class="avatar" alt="图片显示失败"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="缩略图">
          <el-upload
              class="avatar-uploader"
              :action="shareThumbnailUpload"
              :show-file-list="false"
              :on-success="handleThumbnailSuccess"
          >
            <img v-if="videoForm.thumbnail_url" :src="videoForm.thumbnail_url" class="avatar" alt="图片显示失败"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否原创">
          <el-radio-group v-model="videoForm.isOriginal">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述">
          <el-input placeholder="请输入内容" v-model="videoForm.description"></el-input>
        </el-form-item>
        <el-form-item label="分类"></el-form-item>
        <el-form-item label="视频">
          <SplitChunkUpload @uploadSuccess="uploadSuccess" :uploadUrl="shareVideoChunkUpload" :chunkMergeUrl="shareChunkMerge"></SplitChunkUpload>
        </el-form-item>
        <el-button style="width: 100%">提交</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {UploadFilled,Plus} from '@element-plus/icons-vue'
import {reactive} from "vue";
import {shareVideoChunkUpload, shareChunkMerge,shareThumbnailUpload} from '@/utils/file'
import SplitChunkUpload from "@/components/uploader/SplitChunkUpload.vue";


let videoForm = reactive({
  title: '',
  description: '',
  video_url: '',
  thumbnail_url: '',
  cover: '',
  duration: '',
  width: '',
  height: '',
  isOriginal: 0
})

let uploadSuccess = (fileUrl: string) => {
  videoForm.video_url = fileUrl
}

let handleThumbnailSuccess = (res) => {
  videoForm.thumbnail_url = res.data
}
let handleCoverSuccess = (res) => {
  videoForm.cover = res.data
}
let handleVideoSuccess = (res) => {
  videoForm.video_url = res.data
}

</script>

<style scoped>

</style>
